<template>
    <Header/>
    <div class="detail">
        <div class="detail-top">
            <div class="detail-top-main">
                <div class="course"><span>课程</span><span><el-icon><DArrowRight /></el-icon></span><span>{{courseDetail.isMember==1?'会员课':'免费课'}}</span><span><el-icon><DArrowRight /></el-icon></span><span>{{courseDetail.courseName}}</span></div>
                <div><span style="font-size:20px;font-weight:700;">{{courseDetail.courseName}}</span></div>
                <div><span>难度·{{courseDetail.courseLevel}} 时长 {{courseDetail.totalHour}} 学习人数 {{courseDetail.clicks}} 综合评分10.0</span></div>
            </div>
            <div class="detail-top-bottom">
                <div class="top-bottom-text">
                    <p :class="show==true?'active':''" @click="goCourse">课程章节</p>
                    <p :class="show==false?'active':''" @click="goDownload">下载资料</p>
                </div>
            </div>
        </div>
        <div v-show="show" class="detail-center">
            <div class="text">暂无简介</div>
            <!-- {{courseDetail.bizCourseDetail.description?'暂无简介':courseDetail.bizCourseDetail.description}} -->
            <div class="detail-center-button">
                <el-button type="primary">立即购买</el-button>
                <el-button type="success" @click="addShopCartCourse">加入购物车</el-button>
            </div>
        </div>
        <div v-show="show" class="detail-bottom">
            <div class="bottom-main">
                <div class="bottom-main-first" v-for="item in courseDetail.bizCourseChapters" :key="item.id">
                    <p class="title" style="font-size:20px;font-weight:700;">{{item.chapterName}}</p>
                    <p class="descript" style="font-size:12px;color:'#808080';">{{item.description}}</p>
                    <ul class="detail">
                        <li v-for="ele in item.children" :key="ele.id">
                            <div class="txt">
                                <span><el-icon><VideoCameraFilled /></el-icon></span>
                                <span>视频: {{ele.chapterName}}</span>
                            </div>
                            <div><el-button type="primary" @click="goStudy(ele)">开始学习</el-button></div>
                        </li>
                    </ul>
                </div>
                <div class="bottom-main-second"></div>
            </div>
        </div>
        <div v-show="!show" class="detail-download">
            <div class="detail-download-item" v-for="item in courseDetail.bizCourseAttachments" :key="item.id">
                <div class="item-left">
                    <span><el-icon><Download /></el-icon></span>
                    <span>{{item.attachmentName}} 课程id {{item.courseId}}</span>
                </div>
                <div class="item-right">
                    <el-button type="primary" @click="downloadData(item)">下载资料</el-button>
                </div>
            </div>
        </div>
    </div>
    <Footer/>
</template>

<script setup>
//引入组件
import Header from "@/components/common/Header.vue"
import Footer from "../components/common/Footer.vue"
//引入vue组合式api
import {ref,onBeforeMount,reactive} from 'vue'
//引入路由相关api
import {useRoute,useRouter} from "vue-router"
const route = useRoute()
const router = useRouter()
//element ui
import {DArrowRight,VideoCameraFilled,Download} from '@element-plus/icons-vue'
import {ElIcon,ElButton,ElMessage} from "element-plus"
//引入请求api
import {reqCourseDetail,reqDownloadData} from '@/api/course.js'
import {reqAddShopCarCourse} from "@/api/cart.js";
import {createTempToken} from "@/api/userInfo.js";

//展示课程章节与下载资料的切换
let show = ref(true)
//课程章节与下载资料的点击事件
const goDownload = ()=>{
    show.value = false
}
const goCourse = ()=>{
    show.value = true
}
//课程详情
let courseDetail = ref({})
//课程资料下载按钮
const downloadData = async (item) => {
    //1.判断是否在登录状态，未在登录状态需要跳转到登录页面
    //2.判断是否有权限下载改资料(请求api判断是否购买过)
    //3.请求下载
    let res = await reqDownloadData({courseId:item.courseId,attachmentId:item.id});
    //下载文件流程
    const blob = new Blob([res]);
    let fileName = item.attachmentName;
    let fileUrl = item.attachmentUrl;
    const extName = fileUrl.substring(
        fileUrl.lastIndexOf('.')
    )
    fileName = fileName + extName;
    const link = document.createElement('a');
    link.download = fileName;
    link.target = '_blank';
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
}
//章节开始学习按钮
const goStudy = (item) => {
    console.log(item);
    //1.判断是否为登录状态，没有登录要跳转到登录页面
    //2.登录状态下，判断是否有权限观看该课程，没有权限则提醒购买课程
    //3.以上都通过则进入视频播放页
    // router.push({path:"/courseplay",query:{courseId:item.id}});
    router.push({path:'/courseplay/'+item.id+"/"+item.courseId})
}
//加入购物车按钮
const addShopCartCourse = async() => {
    // console.log(route.query.courseId);
    let res1 = await createTempToken();
    if(res1.meta.code==200){
        let res2 = await reqAddShopCarCourse({courseId:route.query.courseId,memberId:'a32ebe29ce5348739d1df36f903f1ca2'},res1.data.token);
        ElMessage({
            type: 'info',
            message: `提示:${res2.meta.msg}`,
        })
        console.log("加入购物车api成功",res2);
    }
}

//生命周期
onBeforeMount(() => {
    //console.log(route.query); //{courseId: '3fab6f4226104dbea4383f2a62530716'} 
    reqCourseDetail({courseId:route.query.courseId}).then(res=>{
        courseDetail.value = res.data.data;
        console.log("课程详情api成功",res);
    })
})
</script>

<style scoped>
.detail-top{
    width:100%;
    height: 300px;
    background: url(@/assets/img/courseInfobg1920.png) no-repeat center center;
}
.detail-top-main{
    width: 1000px;
    height: 200px;
    margin:0 auto; 
    color:#fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.detail-top-main .course{
    display: flex;
    align-items: center;
}
.detail-top-main>div>span{
    margin:0 15px;
}
.detail-top-bottom{
    width:100%;
    height: 100px;
    background: #fff;
}
.detail-top-bottom .top-bottom-text{
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.detail-top-bottom .top-bottom-text p{
    margin: 0 20px;
    font-size: 20px;
    font-weight: 700;
    border-bottom: 5px solid #fff;
    padding-top:20px;
    padding-bottom: 20px;
    cursor:pointer;
}
.detail-top-bottom .top-bottom-text .active{
    border-bottom: 5px solid #388fff;
}
.detail-center{
    width:1000px;
    height:200px;
    margin: 20px auto;
    background: rgb(198, 193, 193);
    box-shadow: 2px 2px 2px 1px rgba(146, 138, 138, 0.2);
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.detail-center .text{
    margin: 0 30px;
}
.detail-center .detail-center-button{
    margin: 0 30px;
    display: flex;
    justify-content: end;
}
.detail-bottom{
    width:1000px;
    margin:10px auto;
}
.detail-bottom .bottom-main-first{
    width: 940px;
    padding: 30px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
}
.detail-bottom .bottom-main-first p{
    margin:20px 0;
}
.detail-bottom .bottom-main-first ul>li{
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.detail-bottom .bottom-main-first ul>li .txt span{
    margin:0 5px;
}
.detail-bottom .bottom-main-first ul>li:hover{
    background-color:#77c7ea ;
}
.detail-download{
    width:1000px;
    margin:50px auto;
    display: flex;
    flex-direction: column;
}
.detail-download .detail-download-item{
    width: 100%;
    height: 60px;
    margin: 10px auto !important;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.detail-download-item .item-left{
    display: flex;
}
.detail-download-item .item-left span{
    margin:0 10px;
    cursor: default;
}
.detail-download-item .item-right{
    margin-right: 10px;
}
</style>